<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- art-template是js库，是一个简约、超快的模板引擎，用于简化拼接字符串，把js数据传到html中展示出来的 -->
    <script src="./template-web.js"></script>
</head>
<body>

    <!-- 定义一个容器 -->
    <div id="mydiv"></div>


    


    <!-- 定义一个模板 -->
    <!-- 
        模板中取数据的语法：
            {{ 对象中的属性名 }}
            {{ each 数组名 value index}} 

            {{ /each }}

            类似于js中的判断
            {{ if 条件}}

            {{ /if }}
        
    -->
     <!-- 定义一个模板 -->
    <script type="text/html" id="demo">
        <p>{{ id }}</p>
        <p>{{ name }}</p>
        <li>
            {{ each arrs  value index }}
                <span>索引:{{ index }} 值:{{value}}</span>
            {{ /each }}
        </li>
    </script>

    <script>
        var obj={
            id:1001,
            name:"alice",
            arrs:["吃饭","玩手机","打人"]
        };

        // 直接调用art-template中的template方法，完成数据的填充
       /*  
       template(id,data)
        id:模板id
        data:模板需要的数据，data参数必须传入的是对象，模板是通过对象进行获取的，返回的是一个根据模板完成填充数据后的页面结构的字符串 */
        var res=template("demo",obj);//返回一个将数据填充到模板的整个字符串
        document.querySelector("div").innerHTML=res;
    </script>

</body>
</html>